<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const nickname = ref('')
const gender = ref('male') 
const showPassword = ref(false) 
const showConfirmPassword = ref(false) 
const router = useRouter()

const handleRegister = () => {
  // 模拟注册逻辑
  alert('注册成功！')
  router.push('/login')
}

// 切换密码可见性
const togglePassword = (type: string) => {
  if (type === 'password') {
    showPassword.value = !showPassword.value
  } else {
    showConfirmPassword.value = !showConfirmPassword.value
  }
}
</script>

<template>
  <div class="w-full min-h-screen px-6 py-10">
    <h1 class="text-3xl font-bold text-primary text-center mb-8">注册账号</h1>
    
    <div class="space-y-5">
      <!-- 手机号输入框 -->
      <div class="relative">
        <input 
          v-model="phone" 
          type="tel" 
          placeholder="手机号" 
          class="w-full p-4 pl-12 text-lg rounded-xl border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-200 outline-none"
        />
        <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
          </svg>
        </span>
      </div>
      
      <!-- 密码输入框 -->
      <div class="relative">
        <input 
          v-model="password" 
          :type="showPassword ? 'text' : 'password'" 
          placeholder="设置登录密码" 
          class="w-full p-4 pl-12 text-lg rounded-xl border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-200 outline-none"
        />
        <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
          </svg>
        </span>
        <button 
          @click="togglePassword('password')"
          class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors"
        >
          <svg v-if="showPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
          </svg>
        </button>
      </div>
      
      <!-- 确认密码输入框 -->
      <div class="relative">
        <input 
          v-model="confirmPassword" 
          :type="showConfirmPassword ? 'text' : 'password'" 
          placeholder="确认密码" 
          class="w-full p-4 pl-12 text-lg rounded-xl border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-200 outline-none"
        />
        <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
          </svg>
        </span>
        <button 
          @click="togglePassword('confirm')"
          class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors"
        >
          <svg v-if="showConfirmPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
          </svg>
        </button>
      </div>
      
      <!-- 昵称输入框 -->
      <div class="relative">
        <input 
          v-model="nickname" 
          type="text" 
          placeholder="用户昵称" 
          class="w-full p-4 pl-12 text-lg rounded-xl border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-200 outline-none"
        />
        <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
        </span>
      </div>
      
      <!-- 性别选择 -->
      <div class="py-3 px-4 rounded-xl border border-gray-300">
        <div class="text-gray-600 mb-2">性别</div>
        <div class="flex space-x-6">
          <label class="flex items-center">
            <input 
              v-model="gender" 
              type="radio" 
              name="gender" 
              value="male"
              class="mr-2 accent-primary h-4 w-4"
            >
            男
          </label>
          <label class="flex items-center">
            <input 
              v-model="gender" 
              type="radio" 
              name="gender" 
              value="female"
              class="mr-2 accent-primary h-4 w-4"
            >
            女
          </label>
        </div>
      </div>
    </div>
    
    <button 
      @click="handleRegister"
      class="w-full bg-primary text-white py-4 rounded-full mt-10 text-lg font-bold hover:bg-opacity-90 transition-colors shadow-lg hover:shadow-primary/20"
    >
      完成注册
    </button>
    
    <div class="mt-6 text-gray-500 text-center">
      已有账号？<router-link to="/login" class="text-primary hover:underline transition-colors">立即登录</router-link>
    </div>
  </div>
</template>